.top-bar {
    width: 250px;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    margin-right: -250px;
    border-left: 1px solid $bd-color;
    line-height: 30px;
    background-color: #FFF;
    overflow-y: auto;
    z-index: 100;
    @include boxSizing(border-box);
    @include transition(0.4s, margin);
    .wrapper {
        position: relative;
    }
    .main-nav-link {
        padding: 10px;
        display: block;
        border-bottom: 1px solid $bd-color;
        @include transition(0.2s);
        &:hover, &:focus {
            background-color: #EEE;
        }
    }
    .dropdown {
        border-bottom: 1px solid $bd-color;
    }
    .drop-open {
        @extend .main-nav-link;
        cursor: pointer;
        border-bottom: none;
        .fa {
            margin-left: 7px;
            color: $main-color;
        }
    }
    .drop-content {
        display: none;
        z-index: 20;
        
        ul{
            border-top: 4px solid $main-color;
            background-color: $black;
        }
        a {
            display: block;
            border-top: 1px solid #222;
            padding: 10px;
            color: #FFF;
            @include transition(0.2s);
            &:hover, &:focus {
                background-color: #333;
            }
        }
    }
    
    .top-bar-search {
        border-bottom: 1px solid $bd-color;
        position: relative;
        padding: 10px;
        input[type="text"] {
            display: block;
            padding: 0 40px 0 8px;
            width: 100%;
            height: 30px;
            margin: 0;
            border: 1px solid $bd-color;
            font-size: 14px;
            @include boxSizing(border-box);
        }
        button {
            position: absolute;
            height: 30px;
            width: 40px ;
            top: 10px;
            right: 10px;
            border: none;
            background-color: transparent;
            color: $main-color;
        }
    }
}

@media screen and (min-width: $vw-small){
    .top-bar {
        position: static;
        margin: none;
        width: 100%;
        border-bottom: 1px solid $bd-color;
        overflow-y: visible;
        
        .main-nav {
            display: inline-block;
            border: none;
        }
        .main-nav-link {
            display: inline-block;
            border-bottom: none;
            margin-right: -1px;
            border-right: 1px solid transparent;
            border-left: 1px solid transparent;
            padding: 15px 10px;
            &:hover, &:focus {
                background-color: transparent;
                border-right-color: $bd-color;
                border-left-color: $bd-color;
            }
        }
        .dropdown { 
            display: inline-block;
            border-bottom: none;
            border-right: 1px solid transparent;
            border-left: 1px solid transparent;
            .drop-content{
                display: block;
                max-height: 0;
                overflow: hidden;
                @include transition(0.5s, max-height);
            }
            &:hover, &:focus {
                border-right-color: $bd-color;
                border-left-color: $bd-color;
                
                .drop-content{
                    max-height: 500px;
                }
            }
        }
        .drop-open {
            border: none;
        }
        .drop-content {
            position: absolute;
            
            ul {
                min-width: 220px;
            }
        }
        
        .top-bar-right {
            position: absolute;
            top: 0;
            right: 0;
        }
        .top-bar-search {
            display: inline-block;
            border-bottom: none;
            padding: 15px 10px;
            width: 140px;
            vertical-align: top;
            
            button {
                top: 15px;
            }
        }
    }
    
}